<template>
  <Layout dis-hover>
    <div :style="{width: '100%',height: divHeight, }">
      <Split v-model="split1" style="height: 100%; " class="demo-split">
        <div slot="left" style="height: 100%; overflow-y: auto; overflow-x: hidden; padding: 5px">
          <Tree ref="tree" :data="apsgTree" :load-data="handleLoadData" :render="renderContent" style="width: 100%"></Tree>
        </div>
        <div slot="right" class="demo-split-pane">
          <div>
            <AuditStandards  ref="auditStandards" orgName="所属单位" @update="flush($event)" type="1"  v-show="type === '2'" ></AuditStandards>
            <AuditCategory  ref="auditCategory" @update="flush($event)" type="1"  v-show="type === '3'" ></AuditCategory>
            <AuditPeoject  ref="auditProject" @update="flush($event)" type="2"  v-show="type === '4'" ></AuditPeoject>
            <ProjectItemTable  ref="ProjectItemTable" @update="flush($event)" type="2"  v-show="type === '5'" ></ProjectItemTable>
          </div>
        </div>
      </Split>

    </div>
  </Layout>

</template>
<script>
import {sessionStorage} from '@/common/cacheUtils.js';
import AuditStandards from './standards/StandardsTable.vue'
import AuditCategory from './standards/CategoryTable.vue'
import AuditPeoject from './standards/ProjectTable.vue'
import ProjectItemTable from './standards/ProjectItemTable.vue'
import {Api} from '../../../api/index.js'

export default {
  components: {
    AuditStandards, AuditCategory, AuditPeoject, ProjectItemTable
  },
  data() {
    return {
      id: null,
      title: null,
      selectRoot: [],
      selectNodeInfo:{},
      selectNode:"",
      apsgItemTitle: "",
      apsgItemList: [],
      selectedApsgType: {},
      tableHeight1: 300,
      tableHeight2: 300,
      loading3: false,
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      type:'1',
      loading: false,
      split1: 0.25,
      split2: 0.45,
      apsgTree: [{
        id:'1',
        title : '安全审计基础管理',
        type : '1',
        children: [],
        _loading: false,
        _showChildren: true
      }],
      divHeight:'',
    }
  },
  mounted() {
    this.divHeight = window.innerHeight -135 + 'px';
    this.getAuditStands(this.apsgTree[0]);
    this.selectedApsgType = this.apsgTree[0];
  },
  methods: {
    loadData(item, callback) {
      item.loading3 = true;
      this.$http.get(Api.queryOrg, {
        params: {
          parentId: item.orgId,
          codeAffordIf : 0
        }
      }).then(res => {
        item.loading3 = false;
        if(res.data.data.length !== 0) {
          res.data.data.map(i => {
            i.title = i.orgName
            delete i['orgName']
            i.loading = false;
            i.children = [];
          })
          item.children = res.data.data;
          callback(item.children);
        } else {
          delete item['children'];
          delete item['loading'];
        }
      }).catch(e => {
        console.log(e);
        this.$Message.error('请求失败');
      })
    },
    getAuditStands(parent){
      let user = sessionStorage('userId').getObject('userId');
      this.$http.get(Api.querAuditStandardsbasics, {params:{parentId:parent.id,auditType:'1'}}).then(res => {
        this.$set(parent,'children',res.data.data);
        this.$set(parent,'expand',true);
      }).catch(e => {
        this.$Message.error('请求失败');
      })
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    renderContent (h, { root, node, data }) {
      let icon = "ios-folder";
      return h('span', {
            style: {
              display: 'inline-block',
              cursor: "pointer",
              color: node.node.selected ? "#2d8cf0" : "black" //根据选中状态设置样式
            },
            on:{
              click: () => {
                this.selectNodeInfo = data;
                this.selectRoot = root;
                this.selectNode = node;
                this.type = data.type;
                if (this.type == '2'){
                  this.$refs.auditStandards.setTwoLevelOrgId(data.id,data.title);
                }else if(this.type == '3'){
                  this.$refs.auditCategory.setTwoLevelOrgId(data.data);
                }else if(this.type == '4'){
                  this.$refs.auditProject.setTwoLevelOrgId(data.data);
                }else if(this.type == '5'){
                  this.$refs.ProjectItemTable.setTwoLevelOrgId(data.data);
                }



              },
              //右键点击事件

            }
          },
          [
            h('span', [
              h('Icon', {
                props: {
                  type: icon,
                },
                style: {
                  marginRight: '5px',
                  color: '#FF7F00'
                }
              }),
              h('span', data.title)
            ])
          ]
      );
    },
    handleLoadData (item, callback) {
      if (item.type === '2'){
        this.$http.get(Api.querAuditStandardsTreeList, {params:{parentId:item.id,auditType:'1'}}).then(res => {
          callback(res.data.data);
        }).catch(e => {
          this.$Message.error('请求失败');
        })
      }else if(item.type === '3'){
        this.$http.get(Api.queryTreeAuditCategory, {params:{standardsId:item.id,categoryType:'1'}}).then(res => {
          callback(res.data.data);
        }).catch(e => {
          this.$Message.error('请求失败');
        })
      }else if(item.type === '4'){
        this.$http.get(Api.queryAuditprojectTreeList, {params:{parentId:item.id,categoryType:'2'}}).then(res => {
          callback(res.data.data);
        }).catch(e => {
          this.$Message.error('请求失败');
        })
      }else{
        callback(null);
      }
    },
     queryAuditStandards(params){
       this.$http.get(Api.querAuditStandardsTreeList, {params:{parentId:params.id,auditType:'1'}}).then(res => {
          this.$set(params,'children',res.data.data)
      }).catch(e => {
        this.$Message.error('请求失败');
      })
    },
    queryAuditCategory(params){
      this.$http.get(Api.queryTreeAuditCategory, {params:{standardsId:params.id,categoryType:'1'}}).then(res => {
        this.$set(params,'children',res.data.data)
      }).catch(e => {
        this.$Message.error('请求失败');
      })
    },
    queryAuditProjectCategory(params){
      this.$http.get(Api.queryAuditprojectTreeList, {params:{parentId:params.id,categoryType:'2'}}).then(res => {
        this.$set(params,'children',res.data.data)
      }).catch(e => {
        this.$Message.error('请求失败');
      })
    },
    flush(event){
          if (event === '1'){
            this.selectRoot.find(el => {
              if (el == this.selectNode) {
                this.queryAuditStandards(el.node)
              }
            })
          }else if(event === '2'){
            this.selectRoot.find(el => {
              if (el == this.selectNode) {
                this.queryAuditCategory(el.node)
              }
            })
          }else if(event === '3'){
            this.selectRoot.find(el => {
              if (el == this.selectNode) {
                this.queryAuditProjectCategory(el.node)
              }
            })
          }
    }
  },
}
</script>
<style>
@import './../../../index.css';

.demo-split-pane{
  padding: 10px;
}
.test-5::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-5::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.test-5::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
}
</style>
